<template>
	<!--pages/mine.wxml-->
	<view class="container rel pb120 pt200">
		<view class="rel w100" style="z-index:1000">
			<view class="userInfo clearfix">
				<view>
					<button class="photo">
						<image class="avatar" src="../../static/images/default_avatar.png" mode="aspectFill"></image>
					</button>
				</view>
				<view  v-if='userName'>
					<view class="cfff b f36 pt20 ">{{userName}}</view>
				</view>
			</view>
			<view class="my-bot pl30 pr30 w100">
				<view class="functionTable">
					<view class="function-list" @click="goNavigateTo('/pages2/order/orderList')">
						<view>
							<image class="icon-left" src="../../static/images/wddingdan.png" mode="aspectFill"></image>
							我的订单
						</view>
						<view>
							<image class="icon-right" src="../../static/images/nxt.png" mode="aspectFill"></image>
						</view>
					</view>
					<!-- <view @click="goNavigateTo('/pages2/visit/addPatient')">就诊人管理</view> -->
					<view class="function-list" @click="goNavigateTo('/pages2/address/addressList')">
						<view>
							<image class="icon-left" src="../../static/images/wddizhi.png" mode="aspectFill"></image>
							我的地址
						</view>
						<view>
							<image class="icon-right" src="../../static/images/nxt.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				userName:""
			}
		},
		onLoad() {
			this.userName=uni.getStorageSync("userName")
		},
		methods:{
			goNavigateTo(url){
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	/* pages/mine.wxss */
	page {
		background: #F6F8F9;
	}
	
	.container{
		padding: 0;
		
	}


	.bgImg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 500rpx;
	}

	.userInfo {
		padding: 100rpx 0;
		background: linear-gradient(to bottom, #236EFF 0%, #236EFF 80%, rgba(35,110,255,0) 100%);
		text-align: center;
		height: 548rpx;
	}

	.userInfo .photo {
		width: 172rpx;
		height: 172rpx;
		border-radius: 50%;
		overflow: hidden;
		padding: 0;
	}

	.userInfo .avatar {
		display: block;
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 50%;
	}
	
	.my-bot{
		margin-top: -180rpx;
		padding-top: 40rpx;
	}
	.orderMenu {
		margin-top: 86rpx;
		background: linear-gradient(180deg, #DFEAFE 0%, #FFFFFF 100%);
	}

	.br20 {
		border-radius: 20rpx;
	}

	.more {
		color: #8B8B8B;
	}

	.more image {
		display: inline-block;
		width: 20rpx;
		height: 44rpx;
		vertical-align: top;
	}

	.orderMenu .item {
		width: 33%;
		float: left;
	}

	.orderMenu .item .icon {
		width: 100%;
		text-align: center;
		width: 90rpx;
		height: 90rpx;
		margin: 0 auto;
		margin-top: 8rpx;
		position: relative;
		/* background-color: bisque; */
	}

	.orderMenu .item .icon text {
		position: absolute;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background: var(--redColor);
		line-height: 32rpx;
		color: #fff;
		font-size: 22rpx;
		font-weight: bold;
		top: -12rpx;
		left: 32rpx;
	}

	.orderMenu .item .icon text.cur {
		width: auto;
		padding: 0 8rpx;
		border-radius: 19rpx;
	}

	.orderMenu .item .icon image {
		display: block;
		width: 100rpx;
		height: 100rpx;
	}

	.orderMenu .item view.name {
		padding-top: 8rpx;
	}

	.menu {
		background: linear-gradient(180deg, #DFEAFE 0%, #FFFFFF 100%);
	}


	.menu .item .icon {
		float: left;
	}

	.menu .item text {
		float: left;
		display: block;
		height: 44rpx;
		margin-left: 16rpx;
	}

	.menu .item image {
		display: block;
		float: right;
		width: 44rpx;
		height: 44rpx;
	}

	.contact-btn-box {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.contact-btn {
		font-size: 14px;
		border: none;
		margin: 20px 10px;
		width: 120px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.booking-content-box {
		padding: 20rpx;
		color: #2893ff;
	}

	.sub-title-box {
		background-color: #2893ff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.functionTable{
		background: #F4F5F9;
		border-radius: 24rpx;
		.function-list{
			padding: 30rpx 38rpx; 
			font-size: 32rpx;
			color: #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			> view{
				display: flex;
				align-items: center;
			}
		}
		.icon-left{
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
		.icon-right{
			width: 42rpx;
			height: 42rpx;
		}
		view:last-child{
			border-bottom: none;
		}
	}
</style>